<template>
  <div>
    <Echart
      id="centreLeft1Chart"
      :options="options"
      height="320px"
      width="100%"
    />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import Echart from '@/common/echart'

export default {
  components: {
    Echart
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      options: {},
      // 定义颜色
      colorList: {
      }
    }
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          title: {
            // text: newData,
            text: '',
            textStyle: {
              color: '#D3D6DD',
              fontSize: 24,
              fontWeight: 'normal'
            }
          },
          legend: {
            top: 100,
            right: 10,
            orient: 'vertical',
            itemGap: 15,
            itemWidth: 12,
            itemHeight: 12,
            data: ['气泡数量', '结石数量', '碹顶中部均温', '锡槽水包均温', '锡槽流道均温'],
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            x: '11%',
            width: '66%',
            y: '3%'
          },
          xAxis: {
            type: 'category',
            position: 'bottom',
            axisLine: true,
            axisLabel: {
              color: 'rgba(255,255,255,.8)',
              fontSize: 12
            },
            data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00']
          },
          // 下方Y轴
          yAxis: [
            {
              type: 'value',
              axisLine: false,
              min: 50,
              max: 1600
            },
            {
              type: 'value',
              show: false,
              position: 'right',
              alignTicks: false,
              offset: 80,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#91CC75'
                }
              }
            }
          ],
          series: [
            {
              name: '碹顶中部均温',
              type: 'line',
              // areaStyle: {
              //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //     {
              //       offset: 0,
              //       color: 'rgba(37,110,190,0.8)'
              //     },
              //     {
              //       offset: 1,
              //       color: 'rgba(37,110,190,0.3)'
              //     }
              //   ])
              // },
              data: [1508.2, 1538.2, 1548.2, 1478.2, 1508.2, 1528.2]
            },
            {
              name: '锡槽流道均温',
              type: 'line',
              // areaStyle: {
              //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //     {
              //       offset: 0,
              //       color: 'rgba(25,187,107,0.8)'
              //     },
              //     {
              //       offset: 1,
              //       color: 'rgba(25,187,107,0.3)'
              //     }
              //   ])
              // },
              data: [627.4, 639.4, 627.4, 630.4, 631.4, 631.4]
            },
            {
              name: '锡槽水包均温',
              type: 'line',
              // areaStyle: {
              //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //     {
              //       offset: 0,
              //       color: 'rgba(255,153,0,0.8)'
              //     },
              //     {
              //       offset: 1,
              //       color: 'rgba(255,153,0,0.3)'
              //     }
              //   ])
              // },
              data: [104.8, 125.5, 102.5, 105.5, 107.5, 109.5]
            },
            {
              name: '气泡数量',
              type: 'bar',
              yAxisIndex: 1,
              data: [
                956, 1622, 326, 711, 364, 133
              ]
            },
            {
              name: '结石数量',
              type: 'bar',
              yAxisIndex: 1,
              data: [
                20, 49, 70, 232, 256, 59
              ]
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
